<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="__PUBLIC__/lib/html5shiv.js"></script>
<script type="text/javascript" src="__PUBLIC__/lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="__PUBLIC__/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="__PUBLIC__/lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>时间轴折线图</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 统计管理 <span class="c-gray en">&gt;</span> 时间轴折线图 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:void(0)" onclick="location.reload()" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
	<div class="f-14 c-error">特别声明：Highcharts 是一个用纯 JavaScript编写的一个图表库，仅免费提供给个人学习、个人网站，如果在商业项目中使用，请去Highcharts官网网站购买商业授权。或者您也可以选择其他免费的第三方图表插件，例如百度echarts。H-ui.admin不承担任何版权问题。</div>
	<div id="container" style="min-width:700px;height:400px"></div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="__PUBLIC__/lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="__PUBLIC__/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="__PUBLIC__/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="__PUBLIC__/lib/hcharts/Highcharts/5.0.6/js/highcharts.js"></script>
<script type="text/javascript" src="__PUBLIC__/lib/hcharts/Highcharts/5.0.6/js/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'x',
            spacingRight: 20
        },
        title: {
            text: '{$_GET["date"]}总额挂号量报表'
        },
        subtitle: {
            text: document.ontouchstart === undefined ?
                'Click and drag in the plot area to zoom in' :
                'Pinch the chart to zoom in'
        },
        xAxis: {
            type: 'datetime',
            maxZoom: 24 * 3600000, // fourteen days
            title: {
                text: null
            }
        },
        yAxis: {
            title: {
                text: '挂号量'
            }
        },
        tooltip: {
            shared: true
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            area: {
                fillColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                    stops: [
                        [0, Highcharts.getOptions().colors[0]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                    ]
                },
                lineWidth: 1,
                marker: {
                    enabled: false
                },
                shadow: false,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
            }
        },

        series: [{
            type: 'area',
            name: '挂号量',
            pointInterval: 24 * 3600 * 1000,
//            pointStart: Date.UTC(2006, 0, 01),
            data: [
                    <?php //这里的加了8个小时将时间转为微秒
                        $count = count($regArr);
                        $num = 1;
                        foreach($regArr as $k=>$v){
                            $k = $k*1000+8*3600000;
                            echo "[".$k.",".$v."]";
                            if($count > $num) {
                                echo ",";
                            }
                            $num++; 
                        }
                    ?>
                    ]
        }]
    });
});
</script>

<div class="page-container">
	<div class="mt-20">
		<table class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
			<thead>
				<tr class="text-c">
                                        <th width="50">项目</th>
                                        <?php
                                            foreach($dayAllData as $k=>$v){
                                                if($k == 'all') {
                                                    break;
                                                }
                                                if($v > 0 ) {
                                                ?><th width="10" style="text-align:center;"><a class="btn btn-primary radius ChartForMonth" href="javascript:;" style="" data-testcount="<?php echo $currentYear.'-'.$k; ?>">{$k}:00</th><?php
                                                }else{
                                                    ?><th width="10" style="text-align:center;"><a class="btn btn-primary radius test" href="javascript:;" style="text-align:center;width:20px;padding-left:0px;padding-right:0px;background-color: #999999">{$k}:00</th><?php
                                                }
                                                
                                            }
                                        ?>
                                        <style>
                                                    
</style>
                                        <th width="50">合计</th>
			</thead>
			<tbody>
                                <tr class="text-c">
					<td>来院</td>
                                        <foreach name="dayFirstData" item="vo">
                                            <td>{$vo}</td>
                                        </foreach>
				</tr>
                                <tr class="text-c">
					<td>未到</td>
                                        <foreach name="dayZeroData" item="vo">
                                            <td>{$vo}</td>
                                        </foreach>
				</tr>
                                <tr class="text-c">
					<td>总额</td>
                                        <foreach name="dayAllData" item="vo">
                                            <td>{$vo}</td>
                                        </foreach>
				</tr>
                                <tr class="text-c">
					<td>来院比率</td>
                                        <foreach name="dayPercentageData" item="vo">
                                            <td>{$vo}%</td>
                                        </foreach>
				</tr>
			</tbody>
		</table>
	</div>
</div>
</body>
</html>